<template>
  <div class="add-book">
    <el-form ref="form"
             :model="form"
             enctype="multipart/form-data"
             labelWidth="80px">
      <el-form-item label="图书名称">
        <el-input v-model="form.name"
                  placeholder="请输入图书名称" />
      </el-form-item>
      <el-form-item label="图书价格">
        <el-input v-model="form.price"
                  placeholder="请输入图书价格" />
      </el-form-item>
      <el-form-item label="书籍类别">
        <el-select v-model="form.type"
                   filterable
                   allowCreate
                   defaultFirstOption
                   placeholder="请选择书籍类别">
          <template v-for="(item, index) in filters">
            <el-option :key="index"
                       :label="item.xpk_1913040735_bookType"
                       :value="item.xpk_1913040735_bookType" />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="书籍封面">
        <el-upload action="#"
                   listType="picture-card"
                   :limit="1"
                   :file="form.picture"
                   :autoUpload="false"
                   :onChange="onChange">
          <i slot="default"
             class="el-icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   @click="onSubmit">
          添加图书
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getBookTypes, addBook, uploadImage, addBookType } from '../api'

export default {
  mounted () {
    this.getTypes()
  },
  data () {
    return {
      form: {
        name: '',
        price: '',
        type: '',
        picture: ''
      },
      filters: [],
      typeList: []
    }
  },
  methods: {
    async onSubmit () {
      const data = this.form
      let typeId = ''
      // console.log(this.form.type)
      // console.log(this.typeList.indexOf(this.form.type))
      const index = this.typeList.indexOf(this.form.type)
      if (index > -1) {
        console.log('已有类别')
        typeId = this.filters[index].xpk_1913040735_bookTypeId
        console.log(typeId)
      } else {
        console.log('新建类别')
        await addBookType({ xpk_1913040735_bookType: this.form.type }).then(res => {
          console.log(res)
          if (res) {
            typeId = res.xpk_1913040735_bookTypeId
            // typeId = this.typeList.length
            console.log(typeId)
            this.getTypes()
          }
        })
      }
      var formData = new FormData()
      formData.append('file', data.picture.file)
      await uploadImage(formData).then(res => {
        console.log(typeof res)
        if (typeof res === 'string') {
          console.log(res)
          const imgUrl = res
          const params = {
            xpk_1913040735_bookName: data.name,
            xpk_1913040735_bookPrice: data.price,
            xpk_1913040735_bookTypeId: typeId,
            xpk_1913040735_bookPicture: imgUrl
          }
          console.log(params)
          addBook(params).then(result => {
            this.$message({
              showClose: true,
              message: result,
              type: 'success'
            })
            this.$router.replace({ name: 'bookList' })
          })
        }
      })
    },
    onChange (file) {
      // console.log(file)
      const files = { name: file.name, url: file.url, file: file.raw }
      this.form.picture = files
    },
    async getTypes () {
      await getBookTypes().then(res => {
      // console.log(res)
        this.filters = res
        this.typeList = this.filters.map(item => {
          return item.xpk_1913040735_bookType
        })
        console.log(this.typeList)
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../assets/css/index.less';

.add-book {
  margin: 16px 32px;
}
</style>
